From 356e02fc78385680887ba7d1a971e3836985b362 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Wed, 3 Sep 2014 20:40:43 +0200 Subject: [PATCH] Adwaita: more sass functions remixing --- gtk/resources/theme/Adwaita/_colors.scss | 8 +++---- gtk/resources/theme/Adwaita/_drawing.scss | 20 ++++++++++++---- .../theme/Adwaita/gtk-contained-dark.css | 8 +++---- gtk/resources/theme/Adwaita/gtk-contained.css | 24 +++++++++---------- 4 files changed, 36 insertions(+), 24 deletions(-) diff --git a/gtk/resources/theme/Adwaita/_colors.scss b/gtk/resources/theme/Adwaita/_colors.scss index eafc182efb..c79f523031 100644 --- a/gtk/resources/theme/Adwaita/_colors.scss +++ b/gtk/resources/theme/Adwaita/_colors.scss @@ -7,13 +7,13 @@ $bg_color: if($variant =='light', #ededed, #393f3f); $fg_color: if($variant =='light', #2e3436, #eeeeec); $selected_fg_color: #ffffff; -$selected_bg_color: if($variant =='light', #4a90d9, darken(#4a90d9,20%)); -$selected_borders_color: if($variant == 'light', darken($selected_bg_color, 30%), darken($selected_bg_color,20%)); - // FIXME dark variant color +$selected_bg_color: if($variant == 'light', #4a90d9, darken(#4a90d9,20%)); +$selected_borders_color: if($variant=='light', darken($selected_bg_color, 30%), + darken($selected_bg_color, 20%)); $borders_color: if($variant =='light', darken($bg_color,30%), darken($bg_color,12%)); $borders_edge: if($variant =='light', white, transparentize($fg_color, 0.9)); $link_color: darken($selected_bg_color,10%); -$top_hilight: if($variant =='light', white, transparentize($fg_color, 0.9)); +$top_hilight: $borders_edge; $warning_color: #f57900; $error_color: #cc0000; diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss index 371af4addf..571d0e1ce1 100644 --- a/gtk/resources/theme/Adwaita/_drawing.scss +++ b/gtk/resources/theme/Adwaita/_drawing.scss @@ -110,6 +110,19 @@ @else { @return transparentize(black,$_lbg*0.8); } } +@function _button_hilight_color($c) { +// +// calculate the right top hilight color for buttons +// +// $c: base color; +// + @if lightness($c)>90% { @return white; } + @else if lightness($c)>80% { @return transparentize(white, 0.3); } + @else if lightness($c)>50% { @return transparentize(white, 0.5); } + @else if lightness($c)>40% { @return transparentize(white, 0.7); } + @else { @return transparentize(white, 0.9); } +} + @mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) { // // helper function for the text emboss effect @@ -147,8 +160,7 @@ // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // - $_top_hilight: if(lightness($c)> 70%, white, transparentize(white,0.9)); //not just dark/light but colored buttons - + $_hilight_color: _button_hilight_color($c); $_button_edge: if($edge == none, none, _widget_edge($edge)); $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1))); @@ -167,7 +179,7 @@ @else { border-color: $borders_color; } @include _button_text_shadow($tc,$c); - @include _shadows(inset 0 1px $_top_hilight, $_button_edge); + @include _shadows(inset 0 1px $_hilight_color, $_button_edge); } @else if $t==hover { @@ -183,7 +195,7 @@ $c); @include _button_text_shadow($tc,lighten($c,4%)); - @include _shadows(inset 0 1px $_top_hilight, $_button_edge); + @include _shadows(inset 0 1px $_hilight_color, $_button_edge); } @else if $t==active { diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index 29cf305ecb..2b0367542b 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -551,7 +551,7 @@ GtkFlowBox .grid-child { border-color: #5e0707; text-shadow: 0 -1px rgba(0, 0, 0, 0.64078); icon-shadow: 0 -1px rgba(0, 0, 0, 0.64078); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px rgba(238, 238, 236, 0.1); outline-color: rgba(255, 255, 255, 0.3); } .button.destructive-action:hover { color: white; @@ -559,7 +559,7 @@ GtkFlowBox .grid-child { background-image: linear-gradient(to bottom, #f03c3c, #e81111 40%, #d51010); text-shadow: 0 -1px rgba(0, 0, 0, 0.60878); icon-shadow: 0 -1px rgba(0, 0, 0, 0.60878); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px rgba(238, 238, 236, 0.1); } .button.destructive-action:active, .button.destructive-action:checked { color: white; border-color: #5e0707; @@ -3254,14 +3254,14 @@ GtkCalendar { border-color: #5e0707; text-shadow: 0 -1px rgba(0, 0, 0, 0.64078); icon-shadow: 0 -1px rgba(0, 0, 0, 0.64078); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); } .message-dialog.csd .dialog-action-area .button.destructive-action:hover { color: white; border-color: #5e0707; background-image: linear-gradient(to bottom, #f03c3c, #e81111 40%, #d51010); text-shadow: 0 -1px rgba(0, 0, 0, 0.60878); icon-shadow: 0 -1px rgba(0, 0, 0, 0.60878); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); } .message-dialog.csd .dialog-action-area .button.destructive-action:active { color: white; border-color: #5e0707; diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index 0f46d95588..d9c2ffacfd 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -461,7 +461,7 @@ GtkFlowBox .grid-child { border-color: #1c5187; text-shadow: 0 -1px rgba(0, 0, 0, 0.54353); icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px white; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px white; outline-color: rgba(255, 255, 255, 0.3); } .button.suggested-action:hover { color: white; @@ -469,7 +469,7 @@ GtkFlowBox .grid-child { background-image: linear-gradient(to bottom, #85b4e5, #5b9add 40%, #4a90d9); text-shadow: 0 -1px rgba(0, 0, 0, 0.51153); icon-shadow: 0 -1px rgba(0, 0, 0, 0.51153); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px white; } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px white; } .button.suggested-action:active, .button.suggested-action:checked { color: white; border-color: #1c5187; @@ -543,7 +543,7 @@ GtkFlowBox .grid-child { border-color: #8e0b0b; text-shadow: 0 -1px rgba(0, 0, 0, 0.56078); icon-shadow: 0 -1px rgba(0, 0, 0, 0.56078); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px white; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px white; outline-color: rgba(255, 255, 255, 0.3); } .button.destructive-action:hover { color: white; @@ -551,7 +551,7 @@ GtkFlowBox .grid-child { background-image: linear-gradient(to bottom, #f46b6b, #f03c3c 40%, #ef2929); text-shadow: 0 -1px rgba(0, 0, 0, 0.52878); icon-shadow: 0 -1px rgba(0, 0, 0, 0.52878); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px white; } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px white; } .button.destructive-action:active, .button.destructive-action:checked { color: white; border-color: #8e0b0b; @@ -1218,7 +1218,7 @@ GtkComboBox { border-color: #1c5187; text-shadow: 0 -1px rgba(0, 0, 0, 0.54353); icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); } .titlebar.selection-mode .button:hover, GtkCalendar.selection-mode.header .button:hover, .header-bar.selection-mode .button:hover { color: #ffffff; @@ -1226,7 +1226,7 @@ GtkComboBox { background-image: linear-gradient(to bottom, #85b4e5, #5b9add 40%, #4a90d9); text-shadow: 0 -1px rgba(0, 0, 0, 0.51153); icon-shadow: 0 -1px rgba(0, 0, 0, 0.51153); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); } .titlebar.selection-mode .button:active, GtkCalendar.selection-mode.header .button:active, .titlebar.selection-mode .button:checked, GtkCalendar.selection-mode.header .button:checked, .header-bar.selection-mode .button:active, .header-bar.selection-mode .button:checked { @@ -3355,14 +3355,14 @@ GtkCalendar { border-color: #1c5187; text-shadow: 0 -1px rgba(0, 0, 0, 0.54353); icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); } .message-dialog.csd .dialog-action-area .button.suggested-action:hover { color: white; border-color: #1c5187; background-image: linear-gradient(to bottom, #85b4e5, #5b9add 40%, #4a90d9); text-shadow: 0 -1px rgba(0, 0, 0, 0.51153); icon-shadow: 0 -1px rgba(0, 0, 0, 0.51153); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); } .message-dialog.csd .dialog-action-area .button.suggested-action:active { color: white; border-color: #1c5187; @@ -3401,14 +3401,14 @@ GtkCalendar { border-color: #8e0b0b; text-shadow: 0 -1px rgba(0, 0, 0, 0.56078); icon-shadow: 0 -1px rgba(0, 0, 0, 0.56078); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); } .message-dialog.csd .dialog-action-area .button.destructive-action:hover { color: white; border-color: #8e0b0b; background-image: linear-gradient(to bottom, #f46b6b, #f03c3c 40%, #ef2929); text-shadow: 0 -1px rgba(0, 0, 0, 0.52878); icon-shadow: 0 -1px rgba(0, 0, 0, 0.52878); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); } .message-dialog.csd .dialog-action-area .button.destructive-action:active { color: white; border-color: #8e0b0b; @@ -3523,7 +3523,7 @@ GtkInfoBar { border-color: #1c5187; text-shadow: 0 -1px rgba(0, 0, 0, 0.54353); icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); } .info .button:hover, .question .button:hover, .warning .button:hover, @@ -3533,7 +3533,7 @@ GtkInfoBar { background-image: linear-gradient(to bottom, #85b4e5, #5b9add 40%, #4a90d9); text-shadow: 0 -1px rgba(0, 0, 0, 0.51153); icon-shadow: 0 -1px rgba(0, 0, 0, 0.51153); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); } .info .button:active, .question .button:active, .warning .button:active, -- 2.30.2